import React, { useState } from 'react';
import './monitoring.less';
import { Button, Table, Input, message, Space, Radio } from 'antd';
import Image from '../../static/images/BBD房子.png';
import { WaterLevelPond } from '@jiaminghi/data-view-react';
export default function System() {
  return (
    <div className="quan_1">
      <div className="quan_2">
        <div className="header_1"></div>
        <div className="bottom_1"></div>
        <div className="ding1_1">
          <div className="headerding_1">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                门店管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>设备管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>设备监控</li>
            </ul>
          </div>
          <div className="boxItems">
            {/*  */}
            <div className="item">
              <div className="item_header">中国矿业大学南湖校区松苑一号楼</div>
              <div className="item_content">
                <div className="item_content_left">
                  <WaterLevelPond
                    config={{ data: [66, 45], shape: 'roundRect' }}
                    style={{ width: '100%', height: '100%' }}
                    colors={['red']}
                  />
                </div>
                <div className="item_content_right">
                  <ul>
                    <li>SL19892137892</li>
                    <li>运行状态：运行中</li>
                    <li>运行时间：20:43:16</li>
                  </ul>
                  <div className="list" style={{ color: 'white' }}>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#f5365c',
                        color: 'white',
                      }}
                    >
                      关机
                    </Button>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#fb6340',
                        color: 'white',
                      }}
                    >
                      重启
                    </Button>
                    <Button style={{ background: '#5e72e4', color: 'white' }}>
                      回收
                    </Button>
                  </div>
                </div>
              </div>
            </div>
            {/*  */}
            <div className="item">
              <div className="item_header">中国矿业大学南湖校区松苑一号楼</div>
              <div className="item_content">
                <div className="item_content_left">
                  <WaterLevelPond
                    config={{ data: [66, 45], shape: 'roundRect' }}
                    style={{ width: '100%', height: '100%' }}
                    colors={['red']}
                  />
                </div>
                <div className="item_content_right">
                  <ul>
                    <li>SL19892137892</li>
                    <li>运行状态：运行中</li>
                    <li>运行时间：20:43:16</li>
                  </ul>
                  <div className="list" style={{ color: 'white' }}>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#f5365c',
                        color: 'white',
                      }}
                    >
                      关机
                    </Button>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#fb6340',
                        color: 'white',
                      }}
                    >
                      重启
                    </Button>
                    <Button style={{ background: '#5e72e4', color: 'white' }}>
                      回收
                    </Button>
                  </div>
                </div>
              </div>
            </div>
            {/*  */}
            <div className="item">
              <div className="item_header">中国矿业大学南湖校区松苑一号楼</div>
              <div className="item_content">
                <div className="item_content_left">
                  <WaterLevelPond
                    config={{ data: [66, 45], shape: 'roundRect' }}
                    style={{ width: '100%', height: '100%' }}
                    colors={['red']}
                  />
                </div>
                <div className="item_content_right">
                  <ul>
                    <li>SL19892137892</li>
                    <li>运行状态：运行中</li>
                    <li>运行时间：20:43:16</li>
                  </ul>
                  <div className="list" style={{ color: 'white' }}>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#f5365c',
                        color: 'white',
                      }}
                    >
                      关机
                    </Button>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#fb6340',
                        color: 'white',
                      }}
                    >
                      重启
                    </Button>
                    <Button style={{ background: '#5e72e4', color: 'white' }}>
                      回收
                    </Button>
                  </div>
                </div>
              </div>
            </div>
            {/*  */}
            <div className="item">
              <div className="item_header">中国矿业大学南湖校区松苑一号楼</div>
              <div className="item_content">
                <div className="item_content_left">
                  <WaterLevelPond
                    config={{ data: [66, 45], shape: 'roundRect' }}
                    style={{ width: '100%', height: '100%' }}
                    colors={['red']}
                  />
                </div>
                <div className="item_content_right">
                  <ul>
                    <li>SL19892137892</li>
                    <li>运行状态：运行中</li>
                    <li>运行时间：20:43:16</li>
                  </ul>
                  <div className="list" style={{ color: 'white' }}>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#f5365c',
                        color: 'white',
                      }}
                    >
                      关机
                    </Button>
                    <Button
                      style={{
                        marginRight: '3px',
                        background: '#fb6340',
                        color: 'white',
                      }}
                    >
                      重启
                    </Button>
                    <Button style={{ background: '#5e72e4', color: 'white' }}>
                      回收
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
